<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>帮助列表</title>
	<script src="__INDEX__/js/mui.min.js"></script>
		<link href="__INDEX__/css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="__INDEX__/css/iconfont.css" />
		<link rel="stylesheet" href="__INDEX__/css/style.css" />
		<link rel="stylesheet" href="__INDEX__/css/mall.css" />
</head>
<style>
	body,.mui-content{background: white;}
	.mes_top_icon {float: left; width: 6%; padding-top: 0px; text-align: left; height: 41px;}
	.message_bottom>li .iconfont{line-height:35px; color: #42A5F7; font-size: 15px;}
	.mes_botlis li .iconfont{font-size: 12px; color: #42A5F7;}
	.mes_botlis li .mes_top_icon{width: 4%;}
	.mes_botlis{margin-left: 15px;}
	.mes_botlis li{width: 100%; padding-left: 0;}	
	.mes_botlis .mes_top_bt{color: #666666;}
	.mes_top_info{width: 91%; padding: 1% 0; margin-left: 0; font-weight: bold; height: 41px;}
	.mes_botlis .mes_top_info{width: 90%; float: left; font-weight: normal; height: auto;}
</style>
<body>
	<header class="mui-bar mui-bar-nav">
	    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" href="JavaScript:history.go(-1)"></a>
	    <h1 class="mui-title">帮助列表</h1>
	</header>
	<div class="mui-content">
	    
	   <ul class="message_bottom" id="list_1">
	    	
	    </ul>
	</div>
{include file="public/footer" /}
</body>
</html>
<script>
	//帮助列表
	$.ajax({
			//type:post,
			url:'get_helps',
			data: {
			
			},
			//成功了的回调，并且带有返回值
			success: function(data) {
				if(data.code == 200) {
					var json = data.data;
					var list_1 = "";
					var list_2 = "";
					for(var i =0;i<json.length;i++){
						list_1 =	"<li class='clearfix' onclick=show_item("+i+") id='list_1_"+i+"'>"+
	    							"<div class='mes_top_icon'><span class='iconfont icon-jiantou3'></span></div>"+
	    							"<div class='mes_top_info'>"+
	    							"<p class='mes_top_bt clearfix'>"+json[i]['name']+"</p></div>"+
	    							"<ul class='mes_botlis' style='display:none' id='list_2_"+i+"'></ul></li>";
						$("#list_1").append(list_1);


	    							
						
						var level_2 = json[i]['children'];
						
						if(level_2 !=null){
							for(var j =0;j<level_2.length;j++){
								list_2 = "<a href='help_show.html?help_id="+level_2[j]['id']+"'><li class='clearfix'><div class='mes_top_icon'><span class='iconfont icon-jiantou3'></span></div>"+	
			    					"<div class='mes_top_info'>"+
			    					"<p class='mes_top_bt clearfix' id='list_2_item'>"+level_2[j]['name']+"</p>"+
			    					"</div></li></a>";
			    				$("#list_2_"+i).append(list_2);
							}
						}
					}
				}
			}
		})
</script>
<script>
	function show_item(id){
		$("#list_2_"+id).toggle(500);
	}
</script>